<script setup>

const emit = defineEmits(['didClickMore','didClickItem'])

const onClick = (item)=>{
  emit('didClickItem',item)
}
const onMore = ()=>{
  emit('didClickMore')
}
</script>

<template>
 <div class="content">
    <scroll-view class="scr" scroll-x="true" scroll-y="false" upper-threshold="50" lower-threshold="50" scroll-top="0"
      scroll-left="0" scroll-into-view="" scroll-with-animation="true" enable-back-to-top="false" bindscrolltoupper=""
      bindscrolltolower="" bindscroll="">
      <div class='scr-item' v-for="item in 10" :key="item" @click="onClick(item)">
        
        <img class='item-image' src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="">
        <span class="name">lusctdf</span>
        <span class="price">$1100.00</span>
      </div>
      <div class="more" @click="onMore">
        - 更多 -
      </div>
    </scroll-view>
  </div>
</template>

<style lang="scss" scoped>

.scr {
  display: flex;
  flex: 1;
  /* 允许横向滚动，根据内容多少自动显示滚动条 */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* 隐藏滚动条 */
  margin: 0 0 0 10px;
  .scr-item {
    display: block;
    height: 100%;
    padding: 5px;
    margin-right: 5px;
    width: 110px;
    align-items: center;

    .item-image {
      width: 100px;
      height: 80px;
    }
    .name {
      margin-top: 5px;
      display: block;
      font-size: 10px;
      color: #666;
      line-height: 10px;
      text-align: center;
    }
    .price {
      display: block;
      font-size: 10px;
      color: red;
      line-height: 10px;
      text-align: center;
    }
  }

  .more{
    font-size: 20px;
    line-height: 40px;
    display: block;
    height: 60%;
    width: 30%;
    padding: 10px;
    margin-right: 10px;
  }
}

// 隐藏scr 滚动条
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}

</style>